@include ('user.header', ['title' => '添加域名'])

<div class="container">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            <li class="breadcrumb-item"><a href="./">用户中心</a></li>
            <li class="breadcrumb-item"><a href="./domain-list">短网址域名</a></li>
            <li class="breadcrumb-item active" aria-current="page">添加域名</li>
        </ol>
    </nav>
</div>

<div class="container">
    <div class="row">
        <div class="col-md-8">
            @if (isset($result))
                @if ($result['status'] == '0')
                    <div class="alert alert-warning alert-dismissible fade show" role="alert">
                        {{ $result['msg'] }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @else
                    <div class="alert alert-success alert-dismissible fade show" role="alert">
                        {{ $result['msg'] }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                @endif
            @endif

            <div class="card shadow-sm mb-3">
                <div class="card-body p-3">
                    <form id="addDomainForm" action="{{ url('/api/forward/add') }}" method="post" class="needs-validation" novalidate>
                        @csrf <!-- 添加 CSRF 令牌 -->
                        <input type="hidden" name="api_token" value="{{ session('user')->api_token }}">

                        <div class="mb-3">
                            <label for="domain" class="form-label">域名</label>
                           
                            <input type="text" value="{{ old('domain') }}" name="domain" class="form-control" placeholder="如：6e1.cn" required >
                            <div class="invalid-feedback">请输入域名</div>
                        </div>

                        <div class="mb-3">
                            <label for="share" class="form-label">是否共享</label>
                            <select name="share" id="share" class="form-select">
                                <option value="1"{{ old('share') == '1' ? ' selected' : '' }}>共享</option>
                                <option value="0"{{ old('share') == '0' ? ' selected' : '' }}>不共享</option>
                            </select>
                        </div>

                        <div class="mb-3">
                            <label for="link_length" class="form-label">默认后缀长度</label>
                            <input type="number" name="link_length" id="link_length" value="4" class="form-control" min="1" required/>
                            <div class="invalid-feedback">请输入合法的数字</div>
                        </div>

                        <div class="d-grid gap-2 mt-4">
                            <button type="submit" class="btn btn-primary btn-sm rounded-pill py-2 fs-6 shadow-sm">
                                <i class="bi bi-plus-circle me-1"></i>添加域名
                            </button>
                        </div>
                    </form>

                    <script>
                        // 提交表单时设置请求头
                        $('#addDomainForm').submit(function(event) {
                            event.preventDefault(); // 阻止默认表单提交行为

                            // 获取表单数据
                            var formData = $(this).serialize();

                            // 发送 AJAX 请求
                            $.ajax({
                                url: "{{ url('/api/domain/add') }}",
                                type: "POST",
                                data: formData,
                                headers: {
                                    'Authorization': 'Bearer {{ session('user')->api_token }}'
                                },
                                success: function(response) {
                                    // 处理成功响应
                                    if (response.status == '1') {
                                        alert('添加成功');
                                        window.location.href = "/user/domain-list"; // 跳转到域名列表页面
                                    } else {
                                        alert('添加失败: ' + response.msg); // 显示错误信息
                                    }
                                },
                                error: function(response) {
                                    // 处理错误响应
                                    alert('添加失败: ' + response.responseJSON.msg); // 显示错误信息
                                }
                            });
                        });
                    </script>
                </div>
            </div>
        </div>

        <div class="col-md-4">
            <div class="card shadow-sm">
                <div class="card-body">
                    <h5 class="card-title">域名解析说明</h5>
                    <p class="card-text"><i class="bi bi-info-circle-fill"></i> 使用前，请先把域名解析到以下服务器中的任意一个服务器！</p>
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>记录类型</th>
                                <th>记录值</th>
                            </tr>
                        </thead>
                        <tbody>
                           {!!admin_setting('domain_jx')!!}
                        </tbody>
                    </table>
                    <hr/>
                    <h6 class="card-subtitle mb-2 text-muted">共享</h6>
                    <p class="card-text">其他用户也可以用此后缀进行生成短链接（不能自定义后缀），你对其后缀的短链接有管理权。</p>
                    <hr/>
                    <h6 class="card-subtitle mb-2 text-muted">不共享</h6>
                    <p class="card-text">纯私人使用。</p>
                </div>
            </div>
        </div>
    </div>
</div>

@include ('user.footer')